<template>
    <h1>购物车</h1>
    <div>
        <div v-if="cartList.length == 0" class="nogoods">
            <el-card>
                还没有商品哦，去逛逛吧！
            </el-card>
        </div>
        <div v-else>
            <el-card>
                <el-row :gutter="20">
                    <el-col :span="6" style="text-align:center">商品</el-col>
                    <el-col :span="5" style="text-align:center">单价</el-col>
                    <el-col :span="5" style="text-align:center">数量</el-col>
                    <el-col :span="5" style="text-align:center">小计</el-col>
                    <el-col :span="3" style="text-align:center">操作</el-col>
                </el-row>
                <hr>
                <div v-for="good in cartList" :key="good.goods_id">
                    <el-row :gutter="20" class="card">
                        <el-col :span="3" style="text-align:center; margin: auto 0;">
                            <img :src="good.goods_icon" alt="">
                        </el-col>
                        <el-col :span="3" style="text-align: center; margin: auto 0;"><p class="desc">{{ good.goods_desc }}</p></el-col>
                        <el-col :span="5" style="text-align: center; margin: auto 0;"><p class="price">¥{{ (good.goods_price).toFixed(2) }}</p></el-col>
                        <el-col :span="5" style="text-align: center; margin: auto 0;">
                            <el-input-number v-model="good.car_num" :min="1" @change="handleChange(good.original_num,good.car_num,good.goods_id,good.id)" />
                        </el-col>
                        <el-col :span="5" style="text-align: center; margin: auto 0;"><div class="grid-content ep-bg-purple" />
                            <p class="price">¥{{ (good.goods_price * good.car_num).toFixed(2) }}</p>
                        </el-col>
                        <el-col :span="3" style="text-align: center; margin: auto 0;"><div class="grid-content ep-bg-purple" />
                            <button @click="deleteCart(good.id)">删除</button>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
            <el-card style="margin-top: 20px;">
                <el-row :gutter="20">
                    <el-col :span="4" style="text-align:center">
                        <p class="tatal-price">总计:￥{{ totalPrice() }}</p>
                    </el-col>
                    <el-col :span="16" style="text-align:center"></el-col>
                    <el-col :span="4" style="text-align:center">
                        <button class="goCheckOut" @click="goCheckOut()">结算</button>
                    </el-col>
                </el-row>
            </el-card>
        </div>
    </div>
</template>

<script setup name="Cart">
    import { ref, onMounted } from 'vue'
    import request from '../../../myvue/src/utils/request';
    import { ElMessage } from 'element-plus'

    const cartList = ref([])

    function getCartList() {
        let api = '/cart/getCarts'
        request({
            url: api,
            method: 'get',
            params: {
                username: localStorage.getItem('UserName')
            }
        }).then(res => {
            cartList.value = res.data.map(item => ({
                ...item,
                original_num: item.car_num
            }))
        })
    }

    onMounted(() => {
        getCartList()
    })

    function addCart(id, quantity) {
        let api = '/cart/addCart'

        request({
            url: api,
            method: 'get',
            params: {
                username: localStorage.getItem('UserName'),
                goods_id: id,
                quantity,
            }
        }).then(() => {
            getCartList()
        })
    }

    function deleteCart(id) {
        let api = '/cart/deleteCart'
        request({
            url: api,
            method: 'get',
            params: {
                username: localStorage.getItem('UserName'),
                ids: id,
            }
        }).then(() => {
            getCartList()
        })
    }

    const handleChange = (original_num,value, goods_id, id) => {
        console.log(original_num,value, goods_id, id)
        addCart(goods_id, value - original_num)
    }

    const totalPrice = () => {
        let total = 0
        for (let i = 0; i < cartList.value.length; i++) {
            total += cartList.value[i].goods_price * cartList.value[i].car_num
        }
        return total.toFixed(2)
    }
    
    function goCheckOut() {
        cartList.value.forEach((item) => {
            deleteCart(item.id)
        })
        ElMessage.success('结算成功')
    }

</script>

<style scoped>
    img {
        width: 130px;
        height: auto;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
    .nogoods {
        text-align: center;
        font-weight: 600;
        font-size: 20px;
        color: #999;
    }
    .card {
        margin: 5px;
    }
    .desc {
        color: black;
        font-size: 14px;
        font-weight: 400;
    }
    .price {
        font-size: 18px;
    }
    .tatal-price {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        line-height: 44px;
    }
    .goCheckOut {
        background-color: #ff4040;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 10px 40px;
        font-size: 16px;
        cursor: pointer;
    }
    .goCheckOut:hover {
        background-color: #ff7a7a;
    }
    .goCheckOut:active {
        background-color: #ff1a1a;
    }
</style>